<!DOCTYPE html>
<html>
<head>
    <% include ../common/meta.ejs %>
    <% include ../common/public.ejs %>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mxtxGf9RLAiXzk9f5PDq8Vhd58HZgSRi"></script>
    <link href="//cdn.bootcss.com/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="<%= global.config.publicPath %>/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet">
    <link href="<%= global.config.publicPath %>/uedit/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

    <style>
        /*body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}*/
        #l-map {
            height: 80px;
            width: 270px;
        }

        #r-result {
            width: 100%;
        }
        .input-group-addon {
            padding: 5px 12px;
        }

        .btn.fileinput-button {
            padding: 4px;
            font-size: 14px;
        }

        textarea {
            width: 100%;
        }

        #basicInfoPanel .form-control-static {
            color: #2a2a2a;
        }

        .form-group textarea {
            font-size: 13px;
        }
        .fileinput-del-btn {
            padding: 2px 4px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<% include ../common/header.ejs %>
<div class="container">
    <div class="dolphin-row main page-content">
        <div class="page-header">
            <h5 class="content-title">房型组管理</h5>
            <div class="pull-left">
                <ul class="fl">
                    <input type="hidden" id="houseGroupCode" />
                </ul>
            </div>
        </div>
        <div class="dolphin-col-24">
            <div class="dolphin-row">
                <div class="dolphin-col-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                房型组
                            </div>
                        </div>
                        <div class="panel-body">
                            <div id="categoryTree"></div>
                        </div>
                    </div>
                </div>
                <div class="dolphin-col-18" id="infoPanel">

                    <div class="queryCondition">
                        <form class="query-form">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>名称：</label>
                                    <input type="text" style="width: 100px;" placeholder="名称模糊查询" name="name_like">
                                </div>
                                <div class="col-md-3">
                                    <label>户型：</label>
                                    <select options="houseType"
                                            codeField="code" nameField="name" name="houseType"
                                            dol-validate="required"></select>
                                </div>
                                <div class="col-md-3">
                                    <label>状态：</label>
                                    <select name="status">
                                        <option value="">--请选择--</option>
                                        <option value="1">空房</option>
                                        <option value="2">已租赁</option>
                                        <option value="3">维修中</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-sm btn-inverse btn-query" type="button">搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>


                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h3 class="panel-title">
                                    <i aria-hidden="true" class="fa fa-table fa-lg"></i>
                                    房屋列表
                                </h3>
                                <div class="operationButton" style="float: right;margin-top:-26px;margin-right: -15px;">
                                    <div class="btn-group float-right" role="group">
                                        <button type="button" class="btn btn-success btn-sm" id="houseAdd">
                                            <i class="glyphicon glyphicon-plus-sign"></i>
                                            新增
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="itemList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="roomGroupModal" tabindex="-1" role="dialog" aria-labelledby="roomGroupModalLabel">
    <div class="modal-dialog" role="document" style="top: 1%;left: 30%;width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="prdDataModalLabel">房型组</h4>
            </div>
            <div class="modal-body">
                <form class="room-group-form">
                    <input type="hidden" id="roomGroupHouseId" name="roomGroupHouseId" />
                    <div class="form-group">
                        <label>房型组：</label>
                        <select options="roomGroup" id="roomGroup"
                                codeField="code" nameField="name" name="roomGroup"
                                dol-validate="required"></select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modifyRoomGroup">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="houseDataModal" tabindex="-1" role="dialog" aria-labelledby="houseDataModalLabel">
    <div class="modal-dialog" role="document" style="top: 1%;left: 25%;width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="prdDataModalLabel">房屋选择</h4>
            </div>
            <div class="modal-body">
                <form class="house-form">
                    <div id="houseList"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary confirmHouse">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<% include ../common/footer.ejs %>
<script src="<%= global.config.publicPath %>/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="<%= global.config.publicPath %>/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script src="<%= global.config.publicPath %>/uedit/umeditor.config.js"></script>
<script src="<%= global.config.publicPath %>/uedit/umeditor.min.js"></script>
<script src="<%= global.config.publicPath %>/uedit/lang/zh-cn/zh-cn.js"></script>
<script src="<%= global.config.publicPath %>/bootstrap/bootstrap-suggest.js"></script>

<script>
    $(function () {
        yams.page.um = UM.getEditor('myEditor', {
            imageUrl: "<%= global.config.contextPath == '/' ? '' : global.config.contextPath %>/file/"
            , imagePath: "/uploadFiles"
            , imageFieldName: "upfile"
            , initialFrameWidth: '100%'
            , initialFrameHeight: 420
            , autoHeightEnabled: false
        });
        $('.fileupload').fileupload({
            url: '<%= global.config.contextPath == '/' ? '' : global.config.contextPath %>/file/',
            dataType: 'json',
            done: function (e, data) {
                console.log($(e.target).closest('.img-form'));
                var p = $(e.target).closest('.img-form');
                p.find('.imageShowBody').attr("src", '/uploadFiles' + data.result.url).show();
                p.find('.image-name').val(data.result.url);
            },
            progressall: function (e, data) {
            }
        });
    });
</script>
<script type="text/javascript">
    // 百度地图API功能
    $('.newData').click(function () {
        //浏览器定位
        var geolocation = new BMap.Geolocation();
        var gc = new BMap.Geocoder();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var map = new BMap.Map("l-map");
                map.centerAndZoom(r.point, 12); //定义地图等级，就是放大倍数
                map.enableScrollWheelZoom(true); //启用地图滚轮放大缩小
                var marker = new BMap.Marker(r.point);// 创建标注
                map.addOverlay(marker);  // 将标注添加到地图中
                map.panTo(r.point);
                marker.enableDragging(); //标注可拖拽
                // 开启事件监听
                marker.addEventListener("dragend", function (e) {

                    var x = e.point.lng; //经度
                    var y = e.point.lat; //纬度
                    r.point=e.point;
                    $('#addressName').val('');
                    gc.getLocation(r.point, function(rs){

                        var addComp = rs.addressComponents;
                        $('#addressName').val(addComp.province + "-" + addComp.city + "-" + addComp.district + "-" + addComp.street + "-" + addComp.streetNumber);
                    });
                });

            }
            else {
                alert('failed' + this.getStatus());
            }
            gc.getLocation(r.point, function(rs){

                var addComp = rs.addressComponents;
                $('#addressName').val(addComp.province + "-" + addComp.city + "-" + addComp.district + "-" + addComp.street + "-" + addComp.streetNumber);
            });
        }, { enableHighAccuracy: true })
    });

</script>
</body>
</html>


